iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Modern Web

從0到有做出一個商家網頁系列 第 24

Day24:繼續學習編寫網頁表單的HTML

  • 分享至 

  • xImage
  •  

今天要接著昨天的進度繼續學習

1.建立下拉式選單

<select>
 <option>~</option>
 <option>~</option>
</select>

<select>~</select>包圍全部內容,再以 <option>~</option>包圍每個項目,用name屬性設定<select>標籤,用value屬性設定<option>標籤。
給予multiple屬性,可選擇多個項目。

能以下拉型式顯示多種選項的表單元件稱為「下拉式選單」,此表單要讓訪客選擇屬於自己屬於哪一種類型,下拉式選單的範圍要用<section>標籤包圍,並用<option>標籤包圍其中的選項,設定後請在<section>標籤加上name屬性,並在<option>標籤加上value屬性。

2.建立多行文字輸入欄
<textarea> <textarea>
在開始標籤與結束標籤之間輸入的字串會當作預設值,通常會先空白。

(一)建立「留言」輸入欄

</p>
<p>留言<textarea name="message"></textarea></p>
<p>Send</p>

在此要加入讓訪客留言的欄位,考慮到留言可能會超過一行,所以要建立多行文字輸入欄。
這裡使用<textarea>標籤範圍,並加上name屬性。

(二)建立表單按鈕

<p>留言<textarea name="message"></textarea></p>
<p><input type="submit" value="Send"></p>
</form>

填完表單資料之後,通常會按個按鈕將資料送出,只要在<input>標籤的tpye屬性設定成submit,即可建立傳送按鈕,value屬性的值就是按鈕上顯示的文字,若有多個按鈕,則必須加上name屬性,以便判斷訪客是按了哪個按鈕,這裡只有一個按鈕,所以不須設定。

今天先到這裡明天再繼續!


上一篇
Day23:編寫網頁表單的HTML
下一篇
Day25:繼續學習編寫網頁表單的HTML並學習新的CSS語法
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言